<template>
  <div class="city-page">
    <van-sticky>
      <van-nav-bar class="page-nav-bar" title="城市列表" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="$store.state.city.currentCity" @click="fn"/>
      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell :title="item.label" v-for="item in hotCity" :key="item.id" @click="updateCity(item)" />
      <div v-for="(item,index) in newindexList" :key="index">
        <van-index-anchor :index="item">{{item}}</van-index-anchor>
        <van-cell :title="i.label" v-for="(i,index) in newCityFn(item)" :key="index" @click="allCity(i)"/>
        <!-- <van-cell title="文本" />
        <van-cell title="文本" />-->
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getHotCity, getCity } from '@/api/city'
import {mapMutations} from 'vuex'
export default {
  props: {},
  data() {
    return {
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
      ],
      hotCity: [],
      City: [],
    }
  },
  computed: {
    newindexList() {
      return this.indexList.filter((item) => {
        return item !== '#' && item !== '热'
      })
    },
  },
  created() {},
  mounted() {
    this.getHotCityList()
    this.getCityList()
  },
  watch: {},
  methods: {
    onClickLeft() {
      this.$router.push('/layout/home')
    },
    async getHotCityList() {
      const res = await getHotCity()
      this.hotCity = res.body
    },
    async getCityList() {
      const res = await getCity()
      console.log(res)
      this.City = res.body
      //  console.log( this.City);
      //  console.log( this.newCity);
    },
    newCityFn(index) {
      const res = this.City.filter(
        (item) => item.short[0].toUpperCase() === index
      )
      return res.length === 0 ? [{ label: '暂无城市' }] : res
    },
    fn() {
      this.$router.push('/layout/home')
    },
    ...mapMutations('city',['updateCity','allCity'])
  },
  components: {},
}
</script>

<style scoped lang="less">
.city-page {
  .page-nav-bar {
    background-color: #21b97a;
    //  font-size: 18px;
    //  height:45px
  }
  /deep/ .van-cell__title {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #333;
  }
  /deep/ .van-index-anchor {
    color: #999 !important;
  }
  /deep/ .van-index-bar__sidebar {
    top: 59%;
  }
  /deep/ .van-index-bar__index {
    display: block;
    height: 20px;
    line-height: 20px;
    color: #333;
    padding: 0 1px;
    font-size: 14px;
    margin-right: 5px;
    margin-bottom: 4px;
  }
  /deep/ .van-index-bar__index--active {
    color: #fff;
    background-color: #21b97a;
    font-size: 12px;
    border-radius: 100%;
  }
}
</style>
